<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <script type="text/javascript" src="layui/layui.js" charset="utf-8"></script>

</head>

<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>默认风格的Tab</legend>
</fieldset>
<div class="layui-tab" lay-filter="tab-all">
    <ul class="layui-tab-title">
        <li data-status="" class="layui-this">全部订单</li>
        <li data-status="1">待付款</li>
        <li data-status="3">待收货</li>
        <li data-status="5">已完成</li>
        <li data-status="6">已取消</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <table class="layui-hide" id="order_all"></table>
        </div>
        <div class="layui-tab-item">
            <table class="layui-hide" id="order_pay"></table>
        </div>
        <div class="layui-tab-item">
            <table class="layui-hide" id="order_receive"></table>
        </div>
        <div class="layui-tab-item">
            <table class="layui-hide" id="order_finish"></table>
        </div>
        <div class="layui-tab-item">
            <table class="layui-hide" id="order_cancel"></table>
        </div>
    </div>
</div>
<script type="text/javascript" src="layui/layui.js">

    layui.use(['element', 'table'], function () {
        // Tab的切换功能，切换事件监听等，需要依赖element模块
        var $ = layui.jquery, table = layui.table, element = layui.element;
        // 初始化加载
        getList('#order_all', '')
        // 监听tab切换 操作：文档 - 内置模块 - 常用元素操作 element - 监听tab切换
        element.on('tab(tab-all)', function (data) {
            // console.log(this);        // 当前Tab标题所在的原始DOM元素
            // console.log(data.index);  // 得到当前Tab的所在下标
            // console.log(data.elem);   // 得到当前的Tab大容器
            var status = $(this).attr('data-status')
            var position = '#order_all'
            switch (status) {
                case '1': position = '#order_pay'; break;
                case '3': position = '#order_receive'; break;
                case '5': position = '#order_finish'; break;
                case '6': position = '#order_cancel'; break;
                default: position = '#order_all';
            }
            getList(position, status)
        })
        // 公共方法
        function getList(position, status = '') {
            table.render({
                elem: position
                , method: 'get'
                , url: 'http://localhost/php/public/index.php/index/order/getList'
                , where: {
                    status: status
                }
                , limit: 5
                , limits: [2, 3, 5]
                , request: {
                    pageName: 'page' //页码的参数名称，默认：page
                    , limitName: 'size' //每页数据量的参数名，默认：limit
                }
                , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                , cols: [[
                    { field: 'order_id', title: 'ID', sort: true }
                    , { field: 'order_create_time', title: '订单创建时间' }
                    , { field: 'order_code', title: '订单编号', sort: true }
                    , { field: 'goods_id', title: '商品id' }
                    , { field: 'produt_id', title: '货品id' } //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                    , { field: 'order_product_num', title: '购买的数量', sort: true }
                    , { field: 'order_price_one', title: '单价', sort: true }
                    , { field: 'order_price_all', title: '总价' }
                    , { field: 'statusName', title: '状态', sort: true }
                    , { field: 'action', title: '操作', sort: true }
                ]]
                , page: true
                , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.data.total, //解析数据长度
                        "data": res.data.data //解析数据列表
                    };
                }
            });
        }
    })
</script>
</body>

</html>